<template>
  <div class="siteAnlysis-wrapper common-card">
    <div class="siteAnlysis-wrapper-title">
      <div class="title">数据概览</div>
      <div class="tab">
        <div
          class="tab-item"
          :class="{ tabactive: activeKey == item.key }"
          v-for="(item, index) in tabListTitle"
          :key="index"
          @click="onTabChange(item.key)"
        >
          <div class="tab-name"> {{ item.tab }} </div>
          <div class="btm-lin"></div>
        </div>
      </div>
    </div>
    <p v-if="activeKey === 'tab1'">
      <VisitAnalysis />
    </p>
    <p v-if="activeKey === 'tab2'">
      <VisitAnalysisBar />
    </p>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';

  const activeKey = ref('tab1');

  const tabListTitle = [
    {
      key: 'tab1',
      tab: '数采量趋势',
    },
    {
      key: 'tab2',
      tab: '报警量',
    },
  ];
  //切换tab
  function onTabChange(key) {
    activeKey.value = key;
  }
</script>

<style lang="less">
  .siteAnlysis-wrapper {
    .siteAnlysis-wrapper-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .title {
        font-weight: 500;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        position: relative;
        padding-left: 12px;
        box-sizing: border-box;
        margin-bottom: 9px;
        &::before {
          content: '';
          display: inline-block;
          width: 4px;
          height: 16px;
          background: #2367fa;
          border-radius: 2px;
          position: absolute;
          top: 0px;
          bottom: 0px;
          margin: auto;
          left: 0px;
        }
      }
      .tab {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #3a3837;
        .tab-item {
          margin-left: 40px;
          cursor: pointer;
          position: relative;
          .tab-name {
            margin-bottom: 7px;
          }
        }
        .tabactive {
          .btm-lin {
            position: absolute;
            width: 100%;
            height: 2px;
            background: #2c68ff;
            border-radius: 1px;
            z-index: 9;
            transition: all 0.5s linear;
          }
          .tab-name {
            color: #2c68ff;
          }
        }
      }
    }
  }
</style>
